import React, { Component } from 'react';
import { HashRouter } from 'react-router-dom'

import Header from '../src/components/index/header/header.jsx';
import Footer from '../src/components/index/footer/footer.jsx';
import Player from '../src/components/detailsOfSong/player';

import App from './App';

import '../src/assets/index/common.less';
import '../src/views/index/index.less';

class Root extends Component {

    render() {

        const demoStyle = { color: 'red', position: 'fixed', bottom: '160px', left: '92%', transform: 'translate(-50%, -50%)' };
        return (
            <HashRouter>
                {/* 页面级公用组件区域【eg: 可将 "回到顶部" 等公用组件放到这里, 这样既可以实现功能又可以保持 App.jsx 的干净】 */}
                {/* 头部公共区域 */}
                <Header />

                {/* 应用程序 '根' 组件 */}
                <App />

                {/* 底部公共区域 */}
                <Footer />

                {/* 回到顶部 */}
                <h1 className="backTop" onClick={this.handleScrollTop} style={demoStyle}></h1>

                {/* 底部播放栏 */}
                <Player></Player>
            </HashRouter>
        );

    }
    handleScrollTop() {
        window.scrollTo({
            left: 0,
            top: 0,
            behavior: 'smooth',
        })
    }
}

export default Root;